'use client';

import type { IQueryPostDetails } from '@/interfaces';
import classNames from 'classnames';

export default function QueryPostBadge({
  details,
}: {
  details: IQueryPostDetails;
}) {
  const basic = details.basic;

  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-stars me-2"></i>
            徽章
          </div>
          <div className="card-body">
            {basic.badges.length > 0 && (
              <ul className="list-group list-group-flush">
                {basic.badges
                  .sort((a, b) => a.sort - b.sort)
                  .map((item) => {
                    const style: any = {};
                    if (item.colorMode !== 'DEFAULT' && item.color) {
                      style.color = item.color;
                    }
                    if (item.colorMode !== 'DEFAULT' && item.backgroundColor) {
                      style.backgroundColor = item.backgroundColor;
                    }

                    return (
                      <li key={item.id} className="list-group-item">
                        <span
                          className={classNames(
                            'badge lh-base',
                            item.colorMode === 'DEFAULT' &&
                              item.backgroundColorMode === 'DEFAULT'
                              ? 'bg-info'
                              : false,
                            item.roundedPill ? 'rounded-pill' : false,
                          )}
                          style={style}
                        >
                          {item.name}
                        </span>
                      </li>
                    );
                  })}
              </ul>
            )}

            {basic.badges.length === 0 && (
              <div className="text-center text-muted">暂无徽章</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
